<script setup lang="ts">
import {ref, watch} from 'vue'
import {NModal} from 'naive-ui'

const props = defineProps({
  ...NModal?.props,
  show: {
    type: Boolean,
    default: false
  },
  widths: {
    type: Number,
    default: 450
  },
  preset: {
    type: String,
    default: "card"
  },
  maskClosable: {
    type: Boolean,
    default: false
  },
  handelSubmitLoading: {
    type: Boolean,
    default: false
  },
  hasAction: {
    type: Boolean,
    default: true
  },
  confirmText: {
    type: String,
    default: "确定"
  },
  loading: {
    type: Boolean,
    default: false
  },
  loadingText: {
    type: String,
    default:"数据加载中"
  }
});
const localHandelSubmitLoading = ref<boolean>(props.handelSubmitLoading);
const emits = defineEmits(['update:show', 'confirm'])
// 监听 props.handelSubmitLoading 的变化，并更新本地状态
watch(() => props.handelSubmitLoading, (newVal) => {
  localHandelSubmitLoading.value = newVal;
});
//点击取消按钮
const handelClose = () => {
  emits('update:show', false);
  localHandelSubmitLoading.value = false;
}
//点击确认按钮
const handelConfirm = (e: MouseEvent) => {
  e.preventDefault();
  emits('confirm');
}
</script>
<template>
  <n-modal v-bind="props" :preset="props.preset"
           :auto-focus="false"
           :style="{ width:props.widths+'px'}" class="custom-modal">
    <n-spin :show="props.loading" :description="`${props.loadingText}...`">
    <template #default>
      <slot name="default"></slot>
    </template>
    </n-spin>
    <template #action>
      <template v-if="props.hasAction">
        <n-space>
          <n-button @click="handelClose" strong secondary>取消</n-button>
          <n-button type="primary"  :loading="props.handelSubmitLoading" :disabled="props.loading" @click="handelConfirm">{{
              props.confirmText
            }}
          </n-button>
        </n-space>
      </template>
      <template v-else>
        <slot name="action"></slot>
      </template>
    </template>

  </n-modal>
</template>
<style lang="scss">
.custom-modal {
  padding: 0 !important;

  .n-card__action {
    padding: 10px 24px;

    .n-space, .n-flex {
      justify-content: end !important;
    }
  }

  .n-dialog__action {
    padding: 10px 24px 14px 24px;
  }
}
</style>
